<template>
  <view class="collect-box" @click="onCollect">
    <image class="img" :src="getCollect" />
    <text class="txt">收藏</text>
  </view>
</template>

<script>
import { userCollect } from '../../api/user'
import isLogin from '../../mixin/isLogin'
export default {
  name: 'article-collect',
  mixins: [isLogin],
  props: {
    articleData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      isCollect: false // 收藏
    }
  },
  computed: {
    getCollect() {
      return this.isCollect ? '/static/images/collect.png' : '/static/images/un-collect.png'
    }
  },
  watch: {
    articleData() {
      this.isCollect = this.articleData.isCollect
    }
  },
  methods: {
    /**
     * 收藏
     */
    async onCollect() {
      // 登录判定是否登录
      if (!this.isLogin) return
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      await userCollect({ articleId: this.articleData.articleId, isCollect: !this.articleData.isCollect })
      uni.hideLoading()
      this.isCollect = !this.isCollect
    }
  }
}
</script>

<style lang="scss" scoped>
.collect-box {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img {
    width: $uni-img-size-base;
    height: $uni-img-size-base;
  }

  .txt {
    font-size: $uni-font-size-sm;
    color: $uni-text-color;
  }
}
</style>
